$(function () {
  // 工具栏
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],
    ['link', 'image', 'video', 'formula'],

    [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
    [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
    [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
    [{ direction: 'rtl' }], // text direction

    [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],

    ['clean'] // remove formatting button
  ]

  // 文本编辑器
  const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: toolbarOptions
    },
    placeholder: '请输入内容'
  })

  // 点击发表按钮
  $('#postBlog').on('click', async () => {
    // 获取文章标题
    const title = $('#title').val().trim()
    // 获取纯文本，用于提取摘要
    const plainContent = quill.getText().trim()
    // 获取 HTML 格式的内容，用于渲染
    const htmlContent = quill.getSemanticHTML()

    if (title.length === 0) {
      return showToast({ msg: '文章标题不能为空！', color: 'danger' })
    }
    if (plainContent.length === 0) {
      return showToast({ msg: '文章内容不能为空！', color: 'danger' })
    }

    const { data: res } = await axios.post('/blog', {
      title,
      // 截取前 110 个字符
      summary: plainContent.length > 110 ? plainContent.slice(0, 110) : plainContent,
      content: htmlContent
    })

    if (res.code === 0) {
      showToast({ msg: '博客发表成功！', color: 'success' })
      // 禁用发表按钮
      $('#postBlog').prop('disabled', true)
      // 显示再写一篇按钮
      $('#newBlog').removeClass('visually-hidden')
    } else {
      showToast({ msg: res.message || '博客发表失败！', color: 'danger' })
    }
  })

  // 点击“再写一篇”按钮
  $('#newBlog').on('click', () => {
    // 清空标题和内容
    $('#title').val('')
    quill.setText('')
    // 重置按钮状态
    $('#postBlog').prop('disabled', false)
    $('#newBlog').addClass('visually-hidden')
  })
})
